<template>
  <ele-modal
    form
    :width="440"
    :model-value="modelValue"
    title="还款记录详情"
    @update:modelValue="updateModelValue"
  >
    <ele-pro-table
      ref="tableRef"
      row-key="userId"
      :columns="columns"
      :datasource="datasource"
      :show-overflow-tooltip="true"
      highlight-current-row
      border
      stripe
    />
  </ele-modal>
</template>

<script setup>
  import { ref } from 'vue';
  import { getRepayRecordListByUserId } from '@/api/student';
  const emit = defineEmits(['done', 'update:modelValue']);
  const props = defineProps({
    /** 弹窗是否打开 */
    modelValue: Boolean,
    /** 修改回显的数据 */
    data: Object,
    billId: Number
  });

  /** 表格实例 */
  const tableRef = ref(null);

  /** 更新modelValue */
  const updateModelValue = (value) => {
    emit('update:modelValue', value);
  };
  /** 表格列配置 */
  const columns = ref([
    {
      prop: 'create_time',
      label: '时间',
      width: 160
    },
    {
      prop: 'amount',
      label: '金额',
      width: 100,
      slot: 'amount'
    },
    {
      prop: 'repayType',
      label: '还款方式'
    }
  ]);
  /** 表格数据源 */
  const datasource = ({ page, limit, where, orders }) => {
    return getRepayRecordListByUserId({
      ...where,
      ...orders,
      page,
      limit,
      bill_id: props.billId,
      tenant_id: ''
    });
  };
</script>

<style lang="scss" scoped>
  .detail-table :deep(.el-descriptions__label) {
    width: 108px;
    text-align: right;
    font-weight: normal;
  }
</style>
